<template>
  <el-container>
    <el-header>&lt; &nbsp;壁纸</el-header>
    <el-main>
      <!-- 作者的头像，姓名 -->
      <div class="iszz">
        <span class="istx">在</span>
        <div class="iszzm">
          <span class="mz">就是小清新</span>
          <span class="sj">2018/10/10</span>
        </div>
      </div>
      <!-- 图片 -->
      <div class="istp">我是图片</div>
      <!-- 想法 -->
      <div class="isxf">
        <div class="zan">151515</div>
        <div class="shouc">收藏</div>
        <div class="guankan">12</div>
      </div>
      <!-- 评论 -->
      <div class="plun">
        <div class="rmpl">热门评论</div>
        <div class="tianjia">
          <span>添加评论</span>
        </div>
      </div>
      <!-- 评论内容 -->
      <div class="plnr" v-for="(item,i) in newIsdata" :key='i'>
        <div class="iszz">
          <span class="istx">
              <img :src="item.user.avatar" alt="">
          </span>
          <div class="iszzm">
            <span class="mz">
                {{item.user.name}}
            </span>
            <span class="sj">
                {{item.atime}}
            </span>
          </div>
        </div>
        <div class="wspl">
          <div class="wsl">
              {{item.content}}
          </div>
          <div class="iszan">
              
              {{item.size}}
          </div>
        </div>
      </div> 
    </el-main> 
    <el-footer>Footer</el-footer>
  </el-container>
</template>
<script>
import Axios from "axios"

export default {
  data() {
    return {
      isdata: "",
      isidd:this.$store.state.isdis
    };
  },
  created() {
    this.$store.dispatch("getcomment");
    console.log(this.$store.state.isdis)
    
  },
  computed:{
    newIsdata(){
      return this.$store.state.iscom
    }
  },
  mounted() {
    console.log(1111);
    this.isdata = this.$store.state.iscom;
    console.log(this.isdata);
    this.loadData()
  },
  methods:{
    loadData(){
      console.log('打印函数')
      let api =`http://service.picasso.adesk.com/v2/vertical/vertical/${this.isidd}/comment`
      console.log(api)
       Axios.get(api).then((res)=>{
        console.log(res)
      })
    },
    
  }
};
</script>
<style scoped>
.el-container {
  height: 100%;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: left;
  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  padding: 10px;
  /* text-align: center; */
  /* line-height: 160px; */
}
.istx {
  /* border: 1px solid red; */
  width: 11%;
  border-radius: 50%;
  margin-right: 15px;
}
.istx img{
    width:100%;
}
.iszz {
  display: flex;
}
.mz {
  font-size: 15px;
  font-weight: 700;
}
.sj {
  font-size: 13px;
  color: rgb(65, 58, 57);
}
.iszzm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.isxf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
/* 评论 */
.plun {
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 10px 0px;
}
.tianjia span {
  color: orange;
  border: 1px solid orange;
  padding: 5px 10px;
}
/* 评论内容 */
.plnr{
    margin-bottom: 30px; 
}
.wspl {
  display: flex;
  justify-content: space-between;
  padding-left: 50px;
}
.wsl {
  width: 80%;
  text-align: left;
}
</style>